<template>
	<view class="location-root">
		<!-- 顶部导航栏 -->
		<view class="location-box">
			<view v-for="(item, i) in arrList" :key="i" class="location-list" @click.stop="chooseLocal(item)">
				<!-- <view class="moren flexs" v-if="item.is_default == 1">默认</view> -->
				<view class="top">
					<image :src="urls + '/static/newImg/address.png'" mode="aspectFill" v-if='item.is_default == 1'>
					</image>
					<image :src="urls + '/static/newImg/address.png'" mode="aspectFill" v-else>
					</image>
					<view class="info-box">
						<view class="name-box">
							<view class="name">{{ item.name }}</view>
							<view class="tel">{{ item.mobile }}</view>
							<view class="box" v-if="item.is_default == 1">默认</view>
						</view>
						<view class="local">
							<view class="dizhi">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}
							</view>
						</view>


						<view class="icon" @click.stop="editClick(item)">
							<image :src="urls + '/static/newImg/xiugaiziliao.png'" mode="scaleToFill" class="pic">
							</image>
						</view>


					</view>
				</view>
				<view class="bottom">
					<view class="default" v-if="item.is_default == 1">
						<image :src="urls + '/static/newImg/yes.png'" mode="aspectFill"></image>
						<view>默认地址</view>
					</view>

					<view class="default" v-else>
						<image :src="urls + '/static/newImg/weixuan.png'" mode="aspectFill"></image>
						<view>默认地址</view>
					</view>
					<view class="delete" @click.stop="delClick(item, i)">删除</view>

				</view>
			</view>
		</view>

		<view class="load flexs" style="color:white;">
			{{ loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh :
				contentText.contentnomore)
			}}
		</view>
		<!-- <u-empty text="没有更多数据了" mode="data"></u-empty> -->
		<view class="kong"></view>
		<view class="fixeds flexs">
			<view class="user_btn allbtn flexs" @click="addAddress">添加收货地址</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			urls: this.$configs.urls,

			localList: [],
			way: null,
			arrList: [],
			loadingType: '',
			contentText: {
				contentdown: "上滑显示更多",
				contentrefresh: "正在加载...",
				contentnomore: "没有更多数据了"
			},
			page: 1,
		}
	},
	onLoad(option) {
		if (option.way) {
			this.way = option.way
			uni.setStorageSync('way', this.way)
		}
	},
	onShow() {
		this.arrData(1);
		this.way = uni.getStorageSync('way')
	},
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: './addlocal'
		})
	},
	onPullDownRefresh() {
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
		clearTimeout();
		this.arrList = []
		this.page = 1;
		this.arrData(1);
	},
	onReachBottom() {
		this.page++; //每触底一次 page +1
		if (this.loadingType != 0) { //loadingType!=0;直接返回
			return false;
		}
		this.loadingType = 1;
		this.arrData(2);
	},
	methods: {
		arrData(type) {
			if (type == 1) {
				this.page = 1
			}
			var obj = {
				page: this.page,
				pagesize: 20,
				type: this.stus
			}
			this.$Request.get(this.$api.user.addressList, obj).then(res => {
				if (type == 1) {
					this.arrList = res.data.list
				} else if (type == 2) {
					if (res.data.list.length < 20) {
						this.loadingType = 2
					} else {
						this.loadingType = 0
					}
					this.arrList = [...this.arrList, ...res.data.list]
				}
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		chooseLocal(item) {
			////console.log(item, 'item');
			uni.showToast({
				icon: 'loading',
				duration: 600,
				success: () => {
					uni.navigateBack({
						delta: 1
					})
					uni.$emit('changedz', {
						'local': item
					})
				}
			})
			if (this.way == 2) {
				return
			}
		},
		addLocal() {
			uni.showToast({
				icon: 'loading',
				duration: 600,
				success: () => {

				}
			})
		},
		delClick(item, index) {
			uni.showModal({
				title: '提示',
				content: '确认删除该地址么？',
				confirmColor: '#0078D7',
				success: res => {
					if (res.confirm) {
						this.$Request.get(this.$api.user.delAddress, {
							id: item.id
						}).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							if (res.code == 0) {
								this.arrList.splice(index, 1)
							}
						});
					}
				}
			});
		},
		editClick(item) {
			var items = JSON.stringify(item)
			uni.showToast({
				icon: 'loading',
				duration: 600,
				success: () => {
					uni.navigateTo({
						url: 'emitAddress?items=' + items
					})
				}
			})
		},
		addAddress() {
			uni.navigateTo({
				url: 'addAddress'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.location-root {
	width: 100%;
	min-height: 98vh;
	background-color: #262626;
	padding-bottom: 90rpx;
	padding-top: 2vh;

	&-topbar {
		width: 100%;
		height: 140rpx;
		background-color: #262626;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		padding-top: 70rpx;
		justify-content: space-between;
		margin-bottom: 10rpx;

		&-title {
			color: white;
			font-size: 36rpx;
			text-align: right;
			flex-grow: 1.6;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.add {
			flex-grow: 1;
			text-align: right;
			color: white;
			font-size: 30rpx;
		}
	}

	.location-box {
		width: 100%;

		.location-list {
			height: 250rpx;
			background-color: #262626;
			margin-bottom: 20rpx;
			position: relative;

			.moren {
				// background-color: #1289FF;
				position: absolute;
				border: 1rpx solid #FC8424;
				border-radius: 4rpx;
				color: #FC8424;
				font-size: 22rpx;
				margin-right: 15rpx;
				width: 73upx;
				height: 31upx;
				top: 30rpx;
				left: 450rpx;
				right: 319rpx;
			}

			.top {
				width: 100%;
				height: 60%;
				border-bottom: 1rpx solid #E8E8E8;
				display: flex;
				align-items: center;

				image {
					width: 49rpx;
					height: 49rpx;
					border-radius: 50%;
					margin-right: 30rpx;
					margin-left: 20rpx;
					flex-shrink: 0;
				}

				.info-box {
					width: 90%;
					height: 90%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					font-size: 32rpx;

					.icon {
						position: absolute;
						right: 32rpx;
						width: 100rpx;
						height: 100rpx;

						.pic {
							width: 35rpx;
							border-radius: 0;
							height: 35rpx;
							margin-top: 25rpx;
						}
					}

					.name-box {
						display: flex;

						.name {
							font-weight: 600;
							margin-right: 30rpx;
							color: white;
						}

						.tel {
							font-size: 20rpx;
							margin-top: 10rpx;
							margin-left: -10rpx;
							color: #fff;
							font-family: PingFang SC;
						}

						.box {
							border: 1rpx solid #FC8424;
							border-radius: 4rpx;
							color: #fff;
							font-size: 22rpx;
							margin-left: 15rpx;
							margin-top: 5rpx;
							width: 73rpx;
							// height: 3rupx;
							text-align: center;
							line-height: 31rpx;
						}
					}

					.local {
						margin-top: 5rpx;
						width: 100%;
						display: flex;

						.dizhi {
							width: 430rpx;
							font-size: 26upx;
							color: #fff;
							font-family: PingFang SC;
							// overflow: hidden;
							// text-overflow: ellipsis;
							// white-space: nowrap;
						}

					}
				}
			}

			.bottom {
				width: 100%;
				height: 40%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				view {
					flex: 1;
				}

				.default {
					display: flex;
					justify-content: flex-start;
					margin-left: 30rpx;
					color: #fff;

					view {
						margin-top: -5rpx;
					}

					image {
						width: 33rpx;
						height: 33rpx;
						margin-right: 16rpx;
						// margin-left: -32rpx;
					}
				}

				.delete {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #fff;
					text-align: right;
					margin-right: 30rpx;
				}

				// view:nth-child(1) {
				// 	margin-left: 50rpx;
				// 	font-size: 26rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: 400;
				// 	color: #282828;
				// }

				// view:nth-child(2) {
				// 	// right: 30rpx;
				// 	text-align: right;
				// 	margin-right: 30rpx;

				// }

				// view {
				// 	width: 160rpx;
				// 	height: 56rpx;
				// 	border-radius: 30rpx;
				// 	// border: 1rpx solid #E8E8E8;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	margin-right: 20upx;
				// 	background: #999999;
				// 	color: #FFFFFF;
				// }

				// view:nth-child(2) {
				// 	background: #1289FF;
				// }
			}
		}
	}

	.notice {
		width: 100%;
		margin: 20rpx auto;
		text-align: center;
		color: #999999;
	}
}

.kong {
	height: 120upx;
}

.fixeds {
	width: 100%;
	height: 120upx;
	position: fixed;
	background-color: #262626;
	bottom: 0;
	left: 0;
}

.user_btn {
	width: 496rpx;
	height: 88rpx;
	border-radius: 48rpx;
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 32rpx;
	color: #fff;
	margin: auto;
	text-align: center;
	line-height: 88rpx;
	background: rgba(0,0,0,0.1);
	border:  1rpx solid #FF9F00;
}
</style>
